<template>
  <div>
    <!-- 回退弹出框 -->
    <CommonDialog
      title="撤回"
      width="75%"
      v-bind:dialogVisible="rebackDialogVisible"
      @on-change-dialogVisible="rebackChange"
      class="reback"
      top="10vh"
    >
      <template #body>
        <el-form class="suspend" :model="rebackForm" label-position="top" ref="rebackForm" :rules="rebackFormRules">
          <el-form-item
            label="撤回原因"
            class="rebackReason"
            prop="rebackReason"
            :rules="[{ required: true, message: '请输入撤回原因', trigger: 'change' }]"
          >
            <socialUpload :contentDefault="rebackForm.rebackReason" @getContent="getUpdateContent"></socialUpload>
            <!-- <quill-editor
              v-model="rebackForm.rebackReason"
              ref="suspendReasonEditor"
            >
            </quill-editor> -->
          </el-form-item>
        </el-form>
      </template>
      <template #dialog_footer>
        <el-button class="submitCancel" @click="rebackCancel">取 消</el-button>
        <el-button type="primary" @click="cofirmReback" class="submitReme">确认</el-button>
      </template>
    </CommonDialog>
  </div>
</template>

<script>
import socialUpload from '../socialUpload/socialUpload.vue'
import CommonDialog from '@/components/commonDialog/commonDialog.vue'
import { FeedBack } from '@/api/feedBack/server'
export default {
    name: '',
    components: {
        CommonDialog,
        socialUpload
    },
    props: {},
    data() {
        return {
            rebackDialogVisible: false,
            tableItemsId: '',
            // 回退弹出框表单内容
            rebackForm: {
                rebackReason: ''
            },
            rebackFormRules: {
                rebackReason: [{ required: true, message: '请选择活动区域', trigger: 'blur' }]
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        show(id) {
            this.tableItemsId = id
            this.rebackDialogVisible = true
        },

        rebackCancel() {
            this.rebackDialogVisible = false
            this.rebackForm = {
                rebackReason: ''
            }
        },
        rebackChange(val) {
            this.rebackDialogVisible = val
            this.rebackForm = {
                rebackReason: ''
            }
        },
        // 确认回退
        cofirmReback() {
            this.$refs['rebackForm'].validate(valid => {
                if (valid) {
                    const objParams = {
                        content: this.rebackForm.rebackReason,
                        id: this.tableItemsId,
                        operationType: 'GET_BACK'
                    }
                    this.reBack(objParams)
                } else {
                    return false
                }
            })
        },
        // 回退
        async reBack(params) {
            try {
                const result = await FeedBack.OperationAsync(params)
                if (result.success) {
                    this.rebackDialogVisible = false
                    this.rebackForm = {
                        rebackReason: ''
                    }
                    this.$emit('refreshPage')
                } else {
                    this.$message.warning(result.message)
                }
            } catch (error) {
                console.log(error)
            }
        },
        getUpdateContent(Value) {
            this.rebackForm.rebackReason = Value
        }
    }
}
</script>

<style scoped lang="less">
/* 回退弹出框样式 -- 开始 */
::v-deep .reback .el-dialog__header {
  width: 100% !important;
}

::v-deep .reback .el-dialog__body {
  padding: 10px 30px;
  overflow: auto;
}

::v-deep .reback .el-dialog {
  box-sizing: border-box;
  border-radius: 5px;
}

::v-deep .rebackReason textarea {
  width: 480px;
  height: 80px;
  background: #ffffff;
  border: 1px solid #dadee0;
  border-radius: 2px;
}

/* 回退弹出框样式 -- 结束 */
</style>
